<template>
  <div>
    <el-table
      :data="tableData"
      size="small"
      show-summary
      stripe
      border
      height="670"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="名字" width="200" align="center" />
      <el-table-column
        prop="useFileCount"
        label="账号总数"
        sortable
        align="center"
      />
      <el-table-column
        prop="useFileSuccess"
        label="账号私信成功"
        sortable
        align="center"
      />
      <el-table-column
        prop="useFileLose"
        label="账号私信失败"
        sortable
        align="center"
      />
      <el-table-column
        prop="personalLetter"
        label="私信"
        sortable
        align="center"
      />
      <el-table-column
        prop="Increase"
        label="私信增加"
        sortable
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup>
import { ref ,watch} from "vue";
const tableData = ref([]);
const props = defineProps({
  tableData: {
    type: Array,
    required: false,
    default: () => []
  }
});

watch(() => props.tableData, (newData) => {
  tableData.value = newData; 

});

</script>

<style lang="scss" scoped>
.el-table {
  font-size: 10px; /* 调整字体大小 */
}
:deep(thead .cell) {
  line-height: 30px !important;
}

:deep(.cell) {
  line-height: 15px !important;
}
:deep(tfoot .cell) {
color: red;
line-height: 23px !important;
}
</style>